import { useState, useEffect } from "react";
import styles from "./index.less";
import Navbar from "@/components/Navbar";
import { useSearchParams, useDispatch } from "umi";
import api from "@/utils/api";
import { Swiper, Button, Popup, Stepper } from "antd-mobile";
export default function Page() {
  const dispatch = useDispatch();
  const [searchParams] = useSearchParams();
  const [basicInfo, setBasicInfo] = useState<any>({});
  const [pics, setPics] = useState<any>([]);
  const [content, setContent] = useState("");
  // 商品规格
  const [sku, setSku] = useState<any>({});
  const getDetail = () => {
    api
      .getDetail({
        id: searchParams.get("id"),
      })
      .then((res) => {
        if (res.data.code === 0) {
          const { basicInfo, pics, content } = res.data.data;
          setBasicInfo(basicInfo);
          setPics(pics);
          setContent(content);
          setSku({
            ...basicInfo,
            number: 1,
          });
        }
      });
  };
  useEffect(() => {
    getDetail();
  }, []);

  // 控制商品规格弹窗
  const [skuStatus, setSkuStatus] = useState(false);
  // 用户 点击行为状态  0 加入购物车 1 立即购买
  const [actionStatus, setActionStatus] = useState(0);
  // 点击商品规格弹窗中的确定按钮
  const confirmAction  = () => {
    if (actionStatus === 0) {
      dispatch({
        type: 'cart/addCart',
        params: {
          goodsId: sku.id,
          number: sku.number
        }
      })
    } else {
      alert('立即购买')
    }
    setSkuStatus(false)
  }


  return (
    <>
      <Navbar title={basicInfo.name || "详情页"} />
      <div className={styles["detail-container"]}>
        <Swiper loop autoplay>
          {pics.map((pic: any) => (
            <Swiper.Item key={pic.id}>
              <img src={pic.pic} alt="" />
            </Swiper.Item>
          ))}
        </Swiper>
        <h4>{basicInfo.name}</h4>

        <div
          className="content"
          dangerouslySetInnerHTML={{ __html: content }}
        ></div>
      </div>
      {/* 商品行动栏 */}
      <div className={styles["action-bar"]}>
        <Button
          color="danger"
          onClick={() => {
            setSkuStatus(true);
            setActionStatus(1);
          }}
          block
        >
          立即购买
        </Button>
        <Button
          color="warning"
          onClick={() => {
            setSkuStatus(true);
            setActionStatus(0);
          }}
          block
        >
          加入购物车
        </Button>
      </div>
      {/* /商品行动栏 */}
      {/* 商品规格弹窗 */}
      <Popup
        showCloseButton
        visible={skuStatus}
        onMaskClick={() => {
          setSkuStatus(false);
        }}
        onClose={() => {
          setSkuStatus(false);
        }}
        bodyStyle={{ height: "36vh" }}
      >
        <div className={styles["sku-container"]}>
          <img src={sku.pic} alt="" />
          <div className="sku-info">
            <h5>{sku.name}</h5>
            <div className="sku-action">
              <div className="price">{sku.price}</div>
              <Stepper
                value={sku.number}
                min={1}
                onChange={(value) => {
                  setSku({
                    ...sku,
                    number: value,
                  });
                }}
              />
            </div>
          </div>
        </div>
        <Button onClick={confirmAction} color="danger" block>
          确定
        </Button>
      </Popup>
      {/* /商品规格弹窗 */}
    </>
  );
}
